<!-- include tpl=usercp/head title=头像修改 -->
<link rel="stylesheet" type="text/css" href="{#js#}/webuploader/webuploader.css" />
<link rel="stylesheet" type="text/css" href="{$config.tpl_id.dir_tpl}usercp/{#css#}/imgareaselect.css" />
<script type="text/javascript" src="{#js#}/webuploader/webuploader.min.js"></script>
<script type="text/javascript" src="{$config.tpl_id.dir_tpl}usercp/{#js#}/jquery.imgareaselect.min.js"></script>
<script type="text/javascript">
//附件上传后执行的JS动作
function update_avatar(rs)
{
	if(!rs || rs.status != 'ok'){
		alert(rs.content);
		return false;
	}
	//$("#avatar").val(rs.content.filename);
	//$("#avatar_view").attr('src',rs.content.filename);
	//更新头像ID
	$.ajax({
		'url': api_url('usercp','avatar','data='+$.str.encode(rs.content.filename)),
		'dataType': 'json',
		'success': function(rs) {
			return true;
		}
	});
}
function preview(img, selection)
{
	$('#x1').val(selection.x1);
	$('#y1').val(selection.y1);
	$('#x2').val(selection.x2);
	$('#y2').val(selection.y2);
	$('#w').val(selection.width);
	$('#h').val(selection.height);
}
function preview2(img, selection)
{
	$('#x1').val(selection.x1);
	$('#y1').val(selection.y1);
	$('#x2').val(selection.x2);
	$('#y2').val(selection.y2);
	$('#w').val(selection.width);
	$('#h').val(selection.height);
}
function ready_cut(width,height)
{
	$('#thumbnail').imgAreaSelect({
		"aspectRatio"	: '1:1',
		"minWidth"		: "150",
		"minHeight"		: "150",
		"x1"			: "0",
		"y1"			: "0",
		"x2"			: "150",
		"y2"			: "150",
		"onSelectChange": preview,
		"imageWidth"	: width,
		"imageHeight"	: height,
		"handles"		: true
	});
}
function save_thumb()
{
	var x1 = $('#x1').val();
	var y1 = $('#y1').val();
	var x2 = $('#x2').val();
	var y2 = $('#y2').val();
	var w = $('#w').val();
	var h = $('#h').val();
	var thumb_id = $("#thumb_id").val();
	if(!thumb_id){
		$.dialog.alert('未上传图片');
		return false;
	}
	if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
		$.dialog.alert("未设置裁剪框！");
		return false;
	}
	var url = get_url('usercp','avatar_cut');
	url += "&thumb_id="+thumb_id;
	url += "&x1="+x1;
	url += "&y1="+y1;
	url += "&x2="+x2;
	url += "&y2="+y2;
	url += "&x1="+x1;
	url += "&w="+w;
	url += "&h="+h;
	//存储并更新图片
	$.phpok.json(url,function(rs){
		if(rs.status == "ok"){
			$.dialog.alert('头像更新成功',function(){
				$.phpok.reload();
			},'succeed');
			return true;
		}
		$.dialog.alert(rs.content);
		return false;
	});
}
</script>
<div class="container-fluid no-gutters main layout-main">
	<!-- include tpl=usercp/sidebar -->
	<div class="layout-right">
		<!-- include tpl=usercp/header -->
		<div class="layout-body">
			<div class="card">
				<div class="card-header">
					头像修改
				</div>
				<div class="card-body">
					<div style="margin:10px;">
						<div id="thelist" class="uploader-list"></div>
						<div class="_progress" id="upload_progress"></div>
						<div class="btns">
							<div id="btn_picture"></div>
						</div>
					</div>
					<div style="display:none;margin:10px;padding:10px;border:1px solid #ccc;background:#efefef;" id="show_cut">
						<div><img src="" width="500" alt="原图" id="thumbnail" /></div>
						<div style="padding:10px"><input type="button" class="am-btn am-btn-primary" onclick="save_thumb()" value=" 保存图片 " /></div>
					</div>
					<input type="hidden" name="thumb_id" value="" id="thumb_id" />
					<input type="hidden" name="x1" value="" id="x1" />
					<input type="hidden" name="y1" value="" id="y1" />
					<input type="hidden" name="x2" value="" id="x2" />
					<input type="hidden" name="y2" value="" id="y2" />
					<input type="hidden" name="w" value="" id="w" />
					<input type="hidden" name="h" value="" id="h" />
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	var uploader = WebUploader.create({
		auto: true,
		server: api_url('upload','save'),
		compress: {width:800,height:800,quality:90,compressSize:200},
		pick: {'id':'#btn_picture','innerHTML':'选择本地图片'},
		fileVal: 'upfile',
		formdata:{
			'{func session_name}':'{func session_id}'
		},
		accept: {
			title: '图片',
			extensions: 'gif,jpg,jpeg,bmp,png',
			mimeTypes: 'image/*'
		},
		resize: false
	});
	uploader.on('fileQueued',function(file){
		$("#upload_progress").append('<div id="phpok-upfile-' + file.id + '" class="phpok-upfile-list">' +
			'<div class="title">' + file.name + ' <span class="status">等待上传…</span></div>' +
			'<div class="progress"><span>&nbsp;</span></div>' +
			'<div class="cancel" id="phpok-upfile-cancel-'+file.id+'"></div>' + 
		'</div>' );
		$("#phpok-upfile-"+file.id+" .cancel").click(function(){
			uploader.removeFile(file,true);
			$("#phpok-upfile-"+file.id).remove();
		});
	});
	uploader.on('uploadProgress',function(file,percent){
		var $li = $('#phpok-upfile-'+file.id),
		$percent = $li.find('.progress span');
		var width = $li.find('.progress').width();
		$percent.css( 'width', parseInt(width * percent, 10) + 'px' );
		$li.find('span.status').html('正在上传…');
		self.upload_state = 'running';
	});
	uploader.on('uploadComplete',function(file){
		$("#phpok-upfile-"+file.id).fadeOut();
	});
	uploader.on('uploadSuccess',function(file,data){
		if(data.status == 'ok'){
			var info = data.content;
			var width = (info.attr.width && info.attr.width) > 500 ? 500 : info.attr.width;
			var height = parseInt((width * info.attr.height)/info.attr.width);
			$("#show_cut").show();
			$("#thumbnail").attr('src',info.filename).css('width',width+"px").css('height',height+"px");
			$("#thumb_id").val(info.id);
			ready_cut(width,height);
		}else{
			$.dialog.alert(data.content,function(){
				$("#show_cut").hide();
			});
		}
	});
});
</script>
<!-- include tpl=usercp/foot -->